import moment from 'moment';
import { connect } from 'umi';
import { useEffect } from 'react';
import { Modal, Table, DatePicker } from 'antd';
import { tableLocale } from '@/tool/components/PageEmpty';
import { useTRState } from '#/utils/trHooks.jsx';
import styles from './index.less';
import { programOverview, fail, success_ok, reporting } from '@/assets';
import planIcon from '@/assets/img/plan_icon.png';
import { getOverviewInfo } from '../..//services';
import { HttpCode } from '#/utils/contacts';
import { CodeSandboxOutlined } from '@ant-design/icons';

const { Column } = Table;
const PlanReportPreview = ({ powerLimitInfo, date, provinceId, dispatch, type }) => {
  const [state, setState] = useTRState({
    visible: false,
    detail_info: [],
    date: '',
  });
  const getTimesConfig = (value) => {
    // 获取日内可选时间段
    setState({ date: value });
    fetch(value.format('YYYY-MM-DD'));
  };
  const fetch = async (value) => {
    let list = [];
    const res = await getOverviewInfo({ provinceId, markDate: value, type });
    if (res.statusCode === HttpCode.SUCCESS) {
      let index = 0;
      res.data.map((item) => {
        item?.stepList.map((item1) => {
          let obj = {
            hourOrder: item.hourOrder,
            stationName: item.stationName,
            status: item.status,
            titleTactics: item.titleTactics,
            sumStep: !!item1.step ? item.stepList.length : null,
            electric: item1.electric,
            price: item1.price,
            step: item1.step,
            reportDate: item.reportDate,
            index,
          };
          index++;
          list.push(obj);
        });
      });
      setState({
        detail_info: list,
      });
    }
  };
  const setIcon = (text) => {
    switch (text) {
      case '成功':
        return <img src={success_ok} />;
      case '失败':
        return <img src={fail} />;
      case '申报中':
        return <img src={reporting} />;
      default:
        return null;
    }
  };
  return (
    <>
      <Modal
        className={styles.model_detail}
        centered={true}
        title={
          <div className={styles.modalTitle}>
            <img src={planIcon} />
            <span className={styles.text}>申报方案总览</span>
          </div>
        }
        footer={null}
        visible={state.visible}
        onCancel={() => {
          setState({ visible: false });
        }}
      >
        <div>
          标定日
          <DatePicker
            className={styles.dataPicker}
            allowClear={false}
            value={state.date}
            format="YYYY.MM.DD"
            onChange={(value) => {
              getTimesConfig(value);
            }}
          />
        </div>
        <Table
          className={styles.table}
          dataSource={state.detail_info}
          locale={tableLocale}
          rowKey="index"
          bordered={true}
          pagination={false}
        >
          <Column
            title="场站"
            align="center"
            dataIndex="stationName"
            key="stationName"
            render={(text, record) => {
              const rowSpan = record?.sumStep || 1;
              return {
                props: { rowSpan: !record?.step || record?.step == '1' ? rowSpan : 0 },
                children: text,
              };
            }}
          />
          <Column
            align="center"
            title="所属方案"
            dataIndex="titleTactics"
            key="titleTactics"
            render={(text, record) => {
              const rowSpan = record?.sumStep || 1;
              return {
                props: { rowSpan: !record?.step || record?.step == '1' ? rowSpan : 0 },
                children: text,
              };
            }}
          />
          <Column
            align="center"
            title="申报日"
            dataIndex="reportDate"
            key="reportDate"
            render={(text, record) => {
              const rowSpan = record?.sumStep || 1;
              return {
                props: { rowSpan: !record?.step || record?.step == '1' ? rowSpan : 0 },
                children: text,
              };
            }}
          />
          <Column
            align="center"
            title="申报结果"
            dataIndex="status"
            key="status"
            render={(text, record) => {
              const rowSpan = record?.sumStep || 1;
              return {
                props: { rowSpan: !record?.step || record?.step == '1' ? rowSpan : 0 },
                children: (
                  <div className={styles.report_status}>
                    {setIcon(text)}
                    {text}
                  </div>
                ),
              };
            }}
          />
          <Column
            align="center"
            title="时间段"
            dataIndex="hourOrder"
            key="hourOrder"
            render={(text, record) => {
              const rowSpan = record?.sumStep || 1;
              return {
                props: { rowSpan: !record?.step || record?.step == '1' ? rowSpan : 0 },
                children: text,
              };
            }}
          />
          <Column
            align="center"
            title="阶梯段"
            dataIndex="step"
            key="step"
            render={(text, record) => {
              return text || '-';
            }}
          />
          <Column
            align="center"
            title={
              <>
                电力<span className={styles.danwei}>（MW）</span>
              </>
            }
            dataIndex="electric"
            key="electric"
          />
          <Column
            align="center"
            title={
              <>
                电价<span className={styles.danwei}>（元/MWh）</span>
              </>
            }
            dataIndex="price"
            key="price"
          />
        </Table>
      </Modal>
      <div
        className={styles.programOverview}
        onClick={() => {
          setState({ visible: true });
          getTimesConfig(moment());
        }}
      >
        {/* <img className={styles.icon} src={programOverview} /> */}
        <CodeSandboxOutlined className={styles.icon} />
        <span>待申报方案总览</span>
      </div>
    </>
  );
};

export default connect(({ interprovincialSpotDeclaration }) => ({
  powerLimitInfo: interprovincialSpotDeclaration.powerLimitInfo,
  date: interprovincialSpotDeclaration.date,
  provinceId: interprovincialSpotDeclaration.provinceId,
  type: interprovincialSpotDeclaration.type,
}))(PlanReportPreview);
